<!--
 * @FileDescription 协议定义
 * @Author 杨宇翔
 * @Date 20220628 10:31:18
 * @LastEditors 杨宇翔
 * @LastEditTime 20220628 10:31:18
-->
<template>
    <div class="definition">
        <div class="header">
            <span>数据解析</span>
            <button class="reset" type="button" @click="ProtocolComponent.Default.ShowDocument.value = true">
                <span>协议解析说明</span>
            </button>
        </div>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { ProtocolComponent } from './InertialNavigationComponent';
</script>

<style scoped>
.definition {
    padding-top: 4rem;

    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;

    padding: 0 4rem;
}

.header>span {
    color: #B1B1D4;
    font-size: 3.6rem;
    font-weight: 600;
}

.header>button {
    width: 15rem;
    height: 4rem;

    border-radius: 0.6rem;
    background-color: #36384B;
}

.header>button>span {
    color: white;
    font-size: 1.8rem;
}

.header>button:hover {
    background-color: #A2A2FF80;
}
</style>